﻿(function(window){
	var imgwidth  = 565,
		imgheight = 290,
		spw = 7,
		sph = 1,
		i   = 0,
		tempdiv,
		parediv,
		tempgrid,
		csg   = document.getElementById('grid'),
		game  = document.getElementById('gamesbg');
		imgnum = 0,
		topoffset = 0,
		controller = true, 
		imgset = ['mini_ninjas.jpg','prince_of_persia.jpg',
				  'spiderman_shattered_dimensions.jpg',
				  'brink.jpg','god_of_war_3.jpg','borderlands.jpg',
				  'star_wars_the_old_republic.jpg','batman_arkham_asylum.jpg'];
	
	var ulroot = document.getElementById('coin-slider-games'),
		ul     = ulroot.getElementsByTagName('ul')[0],
		liset  = ul.getElementsByTagName('li'),
		selected = 0;
	
	var width    = parseInt(imgwidth / spw),
		height   = parseInt(imgheight / sph),
		spwidth  = 565 - (spw - 1) * width,
		spheight = 290 - (sph - 1) * height,
		gridset  = [],
		tda      = [];
	
	for(;i<spw*sph;i++){
		tempdiv = document.createElement('div');
		tempgrid = {};
		tempgrid.div = tempdiv;
		if(i % spw == (spw - 1)){
			tempgrid.width = spwidth;
			tempgrid.top = (Math.floor(i/spw))*height;
			tempgrid.left = imgwidth - spwidth;
		}else{
			tempgrid.width = width;
			tempgrid.top = (Math.floor(i/spw))*height;
			tempgrid.left = (i%spw)*width;
		}
		
		if(i > spw * sph - spw - 1){
			tempgrid.height = spheight;
			tempgrid.top = imgheight - spheight;
		}else{
			tempgrid.height = height;
		}
		
		gridset.push(tempgrid);
	}
	
	//添加DIV元素到父节点上
	for(i=0;i<gridset.length;i++){
		parediv = document.createElement('div');
		parediv.className = 'cover';
		parediv.style.width = gridset[i].width + 'px';
		parediv.style.height = gridset[i].height + 'px';
		
		tempdiv = gridset[i].div;
		tempdiv.style.width = gridset[i].width + 'px';
		// tempdiv.style.height = gridset[i].height + 'px';
		tempdiv.style.height = 0;
		tempdiv.style.overflow = 'hidden';
		
		parediv.appendChild(tempdiv);
		csg.appendChild(parediv);
	}
	
	//添加背景图片和样式
	function addbgimg(arry ,imgurl){
		var img = imgurl;
		img == null ? img = 'url("cs/star_wars_the_old_republic.jpg")' :
					  img = 'url("cs/' + imgurl + '")';
		
		for(var i=0; i<arry.length; i++){
			arry[i].div.style.backgroundImage = img;
			arry[i].div.style.backgroundPosition = '-' + arry[i].left + 'px -' + arry[i].top + 'px';
			arry[i].div.style.height = 0;
			// arry[i].div.style.opacity = 0;
			// arry[i].div.style.filter = 'Alpha(Opacity=0)';
		}
	}
	
	//二维数组
	/**
	 *  以 5 行 7 列的二维数组为例
	 *  [[0, 1, 2, 3, 4, 5, 6],
	 *   [1, ...             ],
	 *   ...
	 *   [4, ...             ]]
	 */
	var ii = 0,
		kk = 0;
	for(; ii<sph; ii++){
		tda[ii] = [];
		for(var jj=0; jj<spw; jj++){
			tda[ii].push(gridset[kk++]);
		}
	}
	
	for(i=0;i<liset.length;i++){
		liset[i].id = i;
		addEvent(liset[i],'mouseover',function(){
			controller = false;
			imgnum = this.id;
			topoffset = this.id;
			game.style.top = '-' + topoffset * 290 + 'px';
			csg.style.zIndex = '-1';
			liset[selected++].className = '';
			this.className = 'current';
			selected = this.id;
		});
		
		addEvent(liset[i],'mouseout',function(){
			controller = true;
		});
	}
	
	
	
	
	
	
	
	
	addbgimg(gridset);//init
	
	
	var slide = window.setInterval(function(){
		
		if(controller){
			//console.log('(' + imgnum + ','+ topoffset + ')');
			if(++imgnum > 7) imgnum = 0;
			addbgimg(gridset,imgset[imgnum]);
			
			csg.style.zIndex = '3';
			var tempgrids = [];
			
			
			if(sph == 1){
				// tempgrids = bars(tda,spw,sph);
				// tempgrids = tda[0];
				
				
				// var indexs = pyramid(spw);
				// barsHandle(indexs)
				// barsHandle(indexs.reverse())
				
				
				// var indexs = cross(spw);
				// barsHandle(indexs)
				
				
				var indexs = followed(spw);
				// barsHandle(indexs);
				barsHandle(indexs.reverse());
			}else{
				switch(imgnum % 4){
					case 0 :
						tempgrids = ring(tda,spw,sph);
						break;
					case 1 :
						tempgrids = snake(tda,spw,sph);
						break;
					case 2 :
						tempgrids = random(tda,spw,sph);
						break;
					case 3 :
						tempgrids = bars(tda,spw,sph);
						break;
					default :
						tempgrids = bars(tda,spw,sph);
				}
			}
			
			// gridHandle(tempgrids);
			/*
			for(i=0;i<tempgrids.length;i++){
				(function(){
					var g = tempgrids[i],
						time = 100 * (i + 1);
					
					window.setTimeout(function(){
						// g.div.style.opacity = 0.9;
						// g.div.style.filter = 'Alpha(Opacity=90)';
						proEffect(g.div, 0, g.height);
					},time);
				})();
			}
			*/
			
			
			
			liset[selected++].className = '';
			if(selected > 7) selected = 0;
			liset[selected].className = 'current';
			
			if(topoffset > 7) topoffset = 0;
			game.style.top = '-' + (topoffset++) * 290 + 'px';
		}
	
	},9000);
	
	
	
	
	
	
	//方格处理函数
	function gridHandle(grids){
		for(var i=0; i<grids.length; i++){
			(function(){
				var g = grids[i],
					time = 100 * (i + 1);
					
				window.setTimeout(function(){
					// g.div.style.opacity = 0.9;
					// g.div.style.filter = 'Alpha(Opacity=90)';
					proEffect(g.div, 0, g.height);
				},time);
			})();
		}
	}
	
	
	//竖条处理函数
	function barsHandle(subscripts){
		var grids = tda[0];
		for(var i=0; i<subscripts.length; i++){
			var time = 100 * (i + 1);
			for(var j=0; j<subscripts[i].length; j++){
				(function(){
					var index = subscripts[i][j],
						g = grids[index];
					
					window.setTimeout(function(){
						proEffect(g.div, 0, g.height);
					},time);
				})();
			}
		}
	}
	
	
	//随机函数
	function myrandom(range){
		var random = parseInt((range+1)*Math.random());
		random < (range+1) ? random = random : random = range;
		return random;
	}
	
	
	
	
	
	function proEffect(elem, begin, change){
		var timer = 0,
			duration = 30;
			
		handleClear(elem.slideHandler);
		elem.slideHandler = window.setInterval(function(){
			if(timer ++ >= duration){
				elem.style.height = begin + change + 'px';
				window.clearInterval(elem.slideHandler);
				elem.slideHandler = null;
			}else{
				elem.style.height = swing(timer, begin, change, duration) + 'px';
			}
		}, 12);
	}
	
	function swing(t, b, c, d){
		return ((-Math.cos(t / d * Math.PI) / 2) + 0.5) * c + b;
	}
	
	function handleClear(handler){
		if(handler){
			window.clearInterval(handler);
			handler = null;
		}
	}
	
	
	
	
	
	
	
	
	//金字塔效果
	function pyramid(spw){
		var mid = Math.floor(spw / 2),
			flag = spw % 2,
			subscripts = [];
			
		if(flag == 0){
			var next = mid,
				prev = mid - 1;
			subscripts.push([next, prev]);
			while(prev >= 0 && next < spw){
				var ids = [];
				ids.push(prev--);
				ids.push(next++);
				subscripts.push(ids);
			}
		}else{
			var next = mid + 1,
				prev = mid - 1;
			subscripts.push([mid]);
			while(prev >= 0 && next < spw){
				var ids = [];
				ids.push(prev--);
				ids.push(next++);
				subscripts.push(ids);
			}
		}
		return subscripts;
	}
	
	
	//交叉效果
	function cross(spw){
		var even = 0,
			odd = 1,
			subscripts = [[],[]];
		while(even < spw){
			subscripts[0].push(even);
			even += 2;
		}
		while(odd < spw){
			subscripts[1].push(odd);
			odd += 2;
		}
		return subscripts
	}
	
	
	//依次下落效果
	function followed(spw){
		var s = 0,
			subscripts = [];
		for(var i=0; i<spw; i++){
			var index = [];
			index.push(i);
			subscripts.push(index);
		}
		return subscripts;
	}
	
	
	//回型效果
	function ring(tda,column,line){
		var xmax = column - 1,     //最大的列数
			ymax = line - 1,	   //最大的行数
			xmin = 0,			   //最小的列数
			ymin = 0,			   //最小的行数
			alln = line * column,  //总共的元素
			arry = [],
			q = 0,
			i,j;
		
		while(q < alln){
			i = xmin;
			j = ymin;
			
			while(i <= xmax && q < alln)
				 arry[q++] = tda[j][i++];
			i = xmax;
			j = ++ymin;  //最小行数加1，但是最小行还有一个元素没赋值
			
			while(j <= ymax && q < alln)
				 arry[q++] = tda[j++][i];
			i = --xmax;  //最大列数减1，最大列的元素全部被赋值了
			j = ymax;
			
			while(i >= xmin && q < alln)
				 arry[q++] = tda[j][i--];
			i = xmin;
			j = --ymax;  //最大行数减1，最大行的元素全部被赋值了
			
			while(j >= ymin && q < alln)
				 arry[q++] = tda[j--][i];
			
			++xmin;      //最小列数加1，最小列的元素全部被赋值了
		}
		
		return arry;
	}
	
	
	//蛇形效果
	function snake(tda,column,line){
		var xmax    = column - 1,     		//最大的列数
			ymax    = line - 1,	   			//最大的行数
			not     = xmax + ymax,	   		//总的循环次数
			counter = 0,                	//总的循环计数器
			minxy   = Math.min(xmax,ymax),	//取最小值，用于特殊的用途
			q 		= 0,					//返回数组的下标
			i       = 0,					//二维数组的第二个坐标
			j       = 0,                    //二维数组的第一个坐标
			arry    = [];
			
			
		while(counter <= not){
			
			if(counter % 2 == 0){           //偶数循环
				if(i >= xmax){
					i = xmax;
					j = 0;
				}
			
			}else{							//奇数循环
				if(j >= ymax){
					i = counter - minxy < 0 ? 0 : counter - minxy; //很有意思的赋值
					j = ymax;
				}
			
			}
			
			
			while((i + j) <= counter){
				
				j = counter - i;
				arry[q++] = tda[j][i];
				
				if(counter % 2 == 0){
					if(--i < 0 ){
						i = 0;
					}
					
					if(++j > ymax){
						j = ymax;
						break;
					}
				
				}else{
					if(++i > xmax){
						i = xmax;
						break;
					}
					
					if(--j < 0){
						j = 0;
					}
				}
			}
		
		counter++;
		}
		return arry;
	}
	
	
	//随机效果
	function random(tda,column,line){
		var arry = [],
			q    = 0,
			i    = 0,
			j    = 0;
			
		for(; i<tda.length; i++){
			
			for(j=0; j<tda[i].length; j++){
				
				arry[q++] = tda[i][j];
			}
		}
		
		arry.sort(function(){
			return Math.random() > 0.5 ? -1 : 1;
		});
		
		return arry;
	}
	
	
	//竖条效果
	function bars(tda,column,line){
		var arry = [],
			q    = 0,
			i    = 0,
			j    = 0;
		
		while(i < column){
			j = 0;
			while(j < line){
				arry[q++] = tda[j][i];
				j++;
			}
			i++;
		}
		
		return arry;
	}

})(window)